{extend name="default/template/base_index" /}

{block name="area_header"}
	<link rel="stylesheet" type="text/css" media="all" href="__CSS__/wxshop.css">
	<link type="text/css" rel="stylesheet" src="__CDN__/jquery-uploadify/3.2.1/uploadify.css" />
<script type="text/javascript" src="__CDN__/jquery-validation/1.13.1/jquery.validate.min.js"></script>
	<script type="text/javascript" src="__CDN__/jquery-uploadify/3.2.1/jquery.uploadify.min.js"></script>
<script type="text/javascript" src="__CDN__/jquery-validation/1.13.1/localization/messages_zh.min.js"></script>
    <link type="text/css" rel="stylesheet" href="__CDN__/select2/3.5.2/select2.css" />
    <script type="text/javascript" src="__CDN__/select2/3.5.2/select2.min.js"></script>
    <script type="text/javascript" src="__CDN__/select2/3.5.2/select2_locale_zh-CN.js"></script>
	<link rel="stylesheet" type="text/css" media="all" href="__CDN__/jquery-datetimepicker/jquery.datetimepicker.css">
	<script type="text/javascript" src="__CDN__/jquery-datetimepicker/jquery.datetimepicker.js"></script>
{/block}

{block name="area_body"}
	{include file="default/Widget/topbar" /}
	<div class="admin-main container-fluid">
		{include file="default/Widget/left" /}
		<div class="admin-main-content">
			{include file="default/Widget/breadcrumb" /}

			<div class="col-main">
				<div class="main-hd">
					<h2>编辑商品</h2>
				</div>
				<div class="main-bd clearfix" style="padding: 0 10px;margin-top: 0px;">
					<form class="productForm form-horizontal well validateForm" method="post">
						<fieldset>
                        <input type="hidden" name="main_img" id="main_img" value="" />
                        <input type="hidden" name="carousel_images" id="img" value="" />
						<h3><i>●</i>基本信息</h3>

						<div class="form-group col-lg-12 col-md-12 clearfix">
							<label class="control-label col-lg-2 col-md-2">商品名称</label>
							<div class="col-lg-10 col-md-10">
								<input name="name" maxlength="60" value="" class="js_product_name form-control input-normal input-sm" />
								<span class="help-block">限30个字</span>
							</div>
						</div>
						<div class="form-group col-lg-12 col-md-12 clearfix">
							<label class="control-label col-lg-2 col-md-2">条形码</label>
							<div class="col-lg-10 col-md-10">
								<input name="secondary_headlines" maxlength="60" value="" class="js_product_name form-control input-normal input-sm"/>
								<span class="help-block">限30个字</span>
							</div>
						</div>
						<div class="form-group col-lg-12 col-md-12 clearfix">
							<label class="control-label col-lg-2 col-md-2">商品类型</label>
							<div class="col-md-10 col-lg-10">
								<select name="product_code" class="form-control input-normal" >
									{:w_datatree(6300,true,'00S001',1)}
								</select>
								<div class="help-block">(请选择商品类型)</div>
							</div>
						</div>
						<div class="form-group col-lg-12 col-md-12 clearfix">
							<label class="control-label col-lg-2 col-md-2">规格</label>
							<div class="col-lg-10 col-md-10">
								<input name="specifications" maxlength="60" value="" class="js_product_name form-control input-normal input-sm"/>
								<span class="help-block">限30个字</span>
							</div>
						</div>
						<div class="form-group col-lg-12 col-md-12 clearfix">
							<label class="control-label col-lg-2 col-md-2">编号</label>
							<div class="col-lg-10 col-md-10">
								<input name="number" maxlength="60" value="" class="js_product_name form-control input-normal input-sm"/>
								<span class="help-block">限30个字</span>
							</div>
						</div>
						<input type="hidden" name="price" value="0" />
						<div class="form-group col-lg-12 col-md-12 clearfix">
								<label class="control-label col-lg-2 col-md-2">是否上架</label>
							<div class="col-lg-10 col-md-10">
									<label class="radio-inline">
										<input type="radio" name="onshelf" value="1" class="onshelf"

										/>上架
									</label>
									<label class="radio-inline">
										<input type="radio" name="onshelf" value="0" class="onshelf"

										/>不上架
									</label>
								</div>
							</div>

						<div class="form-group col-lg-12 col-md-12 clearfix">
							<label for="synopsis" class="col-md-2 col-lg-2 control-label">商品简介</label>
							<div class="col-md-10 col-lg-10">
								<textarea name="synopsis" id="synopsis" class="form-control" rows="5"></textarea>
								<div class="help-block">(您最多可以输入500个字)</div>
							</div>
						</div>

						<div class="form-group col-lg-12 col-md-12 clearfix">
							<label class="control-label col-lg-2 col-md-2">商品图片</label>
							<div class="col-lg-10 col-md-10">
								主图<span class="text-muted">(建议尺寸为640像素*640像素，大小不超过500kb)<i data-toggle="tooltip" class="fa fa-question" title="商品主图将会作为商品的默认图片出现在货架及商品详情页。"></i></span>
								<!-- 图片选择DOM结构 -->
								<div class="wxuploaderimg main_img clearfix "  data-maxitems="1">
									<div class="img-preview clearfix" >
											<div class="pull-left clearfix img-item">
												<div class="edit_pic_wrp"><a href="javascript:;" class="fa fa-lg fa-trash js_delete"></a></div>
											</div>
									</div>
									<div class="add">
										<i class="fa fa-plus"></i>
									</div>
								</div>
						</div>
								<!-- 图片选择DOM结构 -->
						</div>



						<div class="form-group col-lg-12 col-md-12 clearfix">
							<label  class="control-label col-lg-2 col-md-2">&nbsp;</label>
							<div class="col-lg-10 col-md-10">
								其他图片<span class="text-muted">(选传，单张图片大小不超过500kb，最多10张)<i class="fa fa-question" data-toggle="tooltip" title="将出现在商品图片库，方便用户更好的了解您的商品。"></i></span>
								<!-- 图片选择DOM结构 -->
								<div class="wxuploaderimg clearfix product-imglist "  data-maxitems="10">
									<div class="img-preview clearfix"  style="display:inline-block;">
											<div class="pull-left clearfix img-item">
												<div class="edit_pic_wrp"><a href="javascript:;" class="fa fa-lg fa-trash js_delete"></a></div>
											</div>


									</div>
									<div class="add"  >
										<i class="fa fa-plus"></i>
									</div>
								</div>

								</div>
							</div>
								<!-- 图片选择DOM结构 -->









						<div class="form-group col-lg-12 col-md-12 clearfix tool-bar text-center border">
							<div class="col-lg-6 col-md-6">
								<a target-form="productForm" href="{:url('Product/add')}" class="ajax-post btn btn-primary btn-sm btn-block" onclick="return check();"   id="js_submit"><i class="fa fa-check"></i>确定</a>
							</div>
							<div class="col-lg-6 col-md-6">
								<a href="{:url('Product/index')}" class="btn btn-default btn-sm btn-block"><i class="fa fa-reply"></i>返回</a>
							</div>
						</div>
						</fieldset>
					</form>
				</div>
			</div>


		</div>
		<!-- END admin-main-content -->
	</div>
	<!-- END admin-main-->
{/block}

{block name="area_footer"}
{include file="default/template/wxpicture" /}

	<script type="text/javascript">
        //国别选择时的操作




        function getData(){

			var main_img = $(".main_img .img-preview img").attr("data-imageid");
			if(main_img){
				$("#main_img").val(main_img);
			}

			$("#img").val("");
			$(".product-imglist .img-preview img").each(function(index,item){
				$("#img").val($("#img").val()+$(item).attr("data-imageid")+",");
				//alert($("#img").val());
			});


            var img_post = $(".img_post .img-preview img").attr("data-imageid");
            if(img_post){
                $("#img_post").val(img_post);
            }

            var img_post_bg = $(".img_post_bg .img-preview img").attr("data-imageid");
            if(img_post_bg){
                $("#img_post_bg").val(img_post_bg);
            }
			//alert($("#img").val());
		}


		function check(){
			getData();
			var txt = $(".js_product_name").val();
			var len = txt.replace(/[^\x00-\xff]/g, 'xx').length ;
			if(len == 0){
				$.scojs_message('商品名称必须填写', $.scojs_message.TYPE_ERROR);
				return false;
			}
			if(len > 30){
				$.scojs_message('商品名称不能超过30个字', $.scojs_message.TYPE_ERROR);
				return false;
			}
			return true;
		}

        //商品属性




		$(function() {

			//图片上传
			wxuploadimg.init({cont:".wxuploaderimg"});
			//



			$(".js_delete:first").click(function(){
				$(".main_img .img-preview img").attr("data-imageid","");
				$("#main_img").attr("value","");
				$("#main_img").val("");
			});

			$('.startdatetime').datetimepicker({
				lang: 'ch',
				format:'Y-m-d H:i:s',
				timepicker:false,
			});
			$('.enddatetime').datetimepicker({
				lang: 'ch',
				format:'Y-m-d  H:i:s',
				timepicker:false,
			});
			$('#expire_time').datetimepicker({
				lang: 'ch',
				format:'Y-m-d  H:i:s',
				timepicker:false,
			});

		})



	</script>

{/block}